<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="HandheldFriendly" content="true">
    <title>QUI Demo</title>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script>
    <link rel="stylesheet" href="../../../../css/frozenui.css">


</head>

<body ontouchstart>
<section class="ui-container">

    <section id="type">
        <h1 class="title">TEXT</h1>
        <div class="demo-item">
            <p class="demo-desc">文本大小</p>
            <div class="demo-block">
                <div class="ui-whitespace">
                    <p>默认字体大小32px, 行高为1.5</p>
                    <h1>标题：h1, 36px</h1>
                    <h2>栏目：h2, 34px</h2>
                    <h3>内文：导航，正文段落h3, 32px</h3>
                    <h4>内文：人名歌名标题等h4, 32px</h4>
                    <h5>副内文：h5, 同ui-txt-sub, 28px</h5>
                    <h6>辅助文字：h6, 同ui-txt-tips, 24px</h6>
                </div>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">文本颜色</p>
            <div class="demo-block">
                <div class="ui-whitespace">
                    <p class="ui-txt-default">主要内容色</p>
                    <p class="ui-txt-white" style="background:#000">主要内容反色</p>
                    <p class="ui-txt-info">辅助次要内容色</p>
                    <p class="ui-txt-muted">时间，输入框，不可点击状态文本色</p>
                    <p class="ui-txt-warning">警示，会员红名，搜索热词，同ui-txt-red</p>
                    <p class="ui-txt-highlight">关键词高亮，同em</p>
                    <p><a>链接颜色</a></p>
                    <p class="ui-txt-feeds">feeds链接</p>
                </div>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">文本两端对齐</p>
            <div class="demo-block">
                <div class="ui-whitespace">
                    <p class="ui-txt-justify-one">一行文本</p>
                    <p class="ui-txt-justify">
                        普通的多行文本内容：在首个《进击的巨人》预热视频中只是描述了一个巨人恰好拿起一人准备放进嘴巴里面，而另个场景则是超大型巨人附着浓重的烟雾将巨手拍下来。将于今年8月1日上映。</p>
                </div>
            </div>

        </div>
    </section>

</section>

<script src="http://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
<script>
    var _mtac = {};
    (function () {
        var mta = document.createElement("script");
        mta.src = "http://pingjs.qq.com/h5/stats.js?v2.0.2";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500421336");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();
</script>


<script src="../../../js/lib/zepto.min.js"></script>
<script src="../../../js/index.js"></script>


</body>
</html>
